<template>
  <el-dialog title="报名名单" :visible.sync="showDialog" width="600px" top="40vh" custom-class="dialog"
             :before-close="close">
    <div v-for="item in applycants" class="applycant">
      <label>{{item.name}}</label>
      <label>*{{item.number}}</label>
    </div>
  </el-dialog>
</template>
<script>
  /**
   * 显示具体报名人数的模态框
   */
   export default {
     name: 'Dialog',
     data(){
       return {
         isShow: this.showDialog
       }
     },
     props:[
       'applycants',
       'showDialog'
     ],
     methods:{
       close(){
         this.$emit('hideDialog');
       }
     },
     beforeUpdate() {
       this.isShow = this.showDialog;
     }
   }
</script>
<style>
  .dialog {
    text-align: left;
  }
  .applycant {
    display: inline-block;
    width: 30%;
    margin-bottom: 5px;
    text-align: center;
  }
  .el-dialog__body {
    max-height: 200px;
    overflow-y: auto;
  }
</style>
